<template>
    <y-layout>
        <y-navbar slot="navbar" title="Radio">
            <router-link to="/cr" slot="left">
                <y-navbar-back-icon></y-navbar-back-icon>
            </router-link>
        </y-navbar>

        <div class="y-cell-title demo-small-pitch">值和标签一致 - 【值：{{radio1}}】</div>
        <y-cell-group>
            <y-cell-item>
                <y-radio-group v-model="radio1" slot="left" :callback="fn">
                    <y-radio val="啦啦啦"></y-radio>
                    <y-radio val="啊啊啊"></y-radio>
                    <y-radio val="喔喔喔"></y-radio>
                </y-radio-group>
            </y-cell-item>
        </y-cell-group>

        <div class="y-cell-title">值和标签不同 - 【值：{{radio2}}】</div>
        <y-cell-group>
            <y-cell-item>
                <y-radio-group v-model="radio2" slot="left">
                    <y-radio val="1">啦啦啦</y-radio>
                    <y-radio val="2">啊啊啊</y-radio>
                    <y-radio val="3">喔喔喔</y-radio>
                </y-radio-group>
            </y-cell-item>
        </y-cell-group>

        <y-cell-group title="禁用">
            <y-cell-item>
                <y-radio-group v-model="radio3" slot="left">
                    <y-radio val="啦啦啦"></y-radio>
                    <y-radio val="啊啊啊"></y-radio>
                    <y-radio val="喔喔喔" disabled></y-radio>
                </y-radio-group>
            </y-cell-item>
        </y-cell-group>

        <y-cell-group title="自定义图标颜色">
            <y-cell-item>
                <y-radio-group v-model="radio4" color="#F00" slot="left">
                    <y-radio val="啦啦啦"></y-radio>
                    <y-radio val="啊啊啊"></y-radio>
                    <y-radio val="喔喔喔"></y-radio>
                </y-radio-group>
            </y-cell-item>
        </y-cell-group>

        <y-cell-group title="自定义图标大小">
            <y-cell-item>
                <y-radio-group v-model="radio5" size="30" slot="left">
                    <y-radio val="1"><span style="font-size: 24px;">男</span></y-radio>
                    <y-radio val="2"><span style="font-size: 24px;">女</span></y-radio>
                    <y-radio val="3"><span style="font-size: 24px;">未知</span></y-radio>
                </y-radio-group>
            </y-cell-item>
        </y-cell-group>
    </y-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                radio1: '啦啦啦',
                radio2: 2,
                radio3: '喔喔喔',
                radio4: '啊啊啊',
                radio5: 2
            }
        },
        methods: {
            fn(val) {
                console.log(val);
            }
        }
    }
</script>
